<template>
	<view class="content fafafa">
		<view class="padding flexbetween ffffff" @click="goInvoiceLook">
			<view class="text_d color_ling">
				我的发票抬头
			</view>
			<u-icon name="arrow-right" color="rgba(175, 175, 175, 1)" size="12"></u-icon>
		</view>
		<u-sticky bgColor="#fff">
			<view class=" margin_top ffffff">
				<u-tabs lineWidth="20" lineColor="rgba(243, 39, 28, 1)" :list="tabList" @click="change"></u-tabs>
			</view>
		</u-sticky>
		<view class="fafafa padding">
			<view class="padding ffffff margin_bottom3 border_2" v-for="item in list.data" :key="item.id">
				<view class="text_x color_ling">
					<text v-if="item.invoice_state==0">待申请</text>
					<text v-if="item.invoice_state==1">申请中</text>
					<text v-if="item.invoice_state==2">已开票</text>
				</view>
				<view class="margin_top flexleft" v-for="value in item.ordergoods" :key="value.id">
					<view class="imgBox margin_right3">
						<image :src="value.goods_image_text" mode="widthFix"></image>
					</view>
					<view class="flex1 width0">
						<view class="yihang text_a color_san">
							{{value.goods_name}}
						</view>
						<view class="text_b color_jiu margin_top1">
							{{value.sku}}
						</view>
						<view class="price margin_top1">
							￥{{value.total_price}}
						</view>
					</view>
				</view>
				<view class="margin_top4" v-show="item.invoice_state==1||item.invoice_state==2">
					<view class="text_a color_six" v-if="item.invoice">
						个人抬头：{{item.invoice.invoice_detail.invoice_title}}
					</view>
					<view class="text_a color_six margin_top2" v-if="item.invoice">
						发票类型：{{item.invoice.invoice_type==1?"电子发票":"增值税专用发票"}}
					</view>
				</view>
				<!-- 全部 -->
				<view class="flexright padding_top margin_top" style="border-top: 1rpx solid rgba(153, 153, 153, .1);">
					<view class="applyButton" v-if="item.invoice_state==0" @click="goWriteInvoice(item)">
						申请发票
					</view>
					<view class="applyButton margin_right3" v-if="item.invoice_state==2" @click="downLoad(item)">
						保存发票
					</view>
					<view class="applyButton" v-if="item.invoice_state==1||item.invoice_state==2"
						@click="goInvoiceInfo(item.id)">
						发票详情
					</view>
				</view>
			</view>
			<view class="flexcenter placeholderBoxTop" v-if="!list.data.length">
				<image class="placeholderBox" src="/static/placeholderimg.png" mode="widthFix"></image>
			</view>
		</view>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				tabActive: 0,
				tabList: [{
					name: '全部',
				}, {
					name: '待申请',
				}, {
					name: '申请中'
				}, {
					name: '已开票'
				}],
				page: 1,
				list: {
					data: []
				}
			}
		},
		onLoad() {},
		onShow() {
			this.getList()
		},
		methods: {
			getList(isPage, page) { //发票列表
				let _this = this;
				httpRequest.request('/api/goods_order/invoice_list', 'GET', {
					page: page || 1,
					invoice_state: _this.tabActive == 0 ? "" : _this.tabActive - 1,
				}, false, false, true).then(res => {
					if (res.code == 1) {
						res.data.data.forEach(item => {
							if (item.invoice) {
								item.invoice.invoice_image = _this.imgUrl + item.invoice.invoice_image
							}
						})
						let resList = res.data;
						let dataList = _this.list;
						if (isPage == true) {
							_this.list.data = dataList.data.concat(resList.data);
						} else {
							_this.list = res.data
							_this.list.data = resList.data;
						}
						console.log(_this.list.data);
					} else {
						httpRequest.toast(res.msg);
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			onReachBottom() {
				let _this = this;
				let list = _this.list;
				let page = _this.page;
				if (list.last_page <= page) {
					return false;
				}
				page++;
				_this.page = page;
				_this.getList(true, page);
			},
			change(e) {
				this.tabActive = e.index
				this.getList()
			},
			goWriteInvoice(item) { //申请发票
				uni.navigateTo({
					url: "./writeInvoice?orderInfo=" + encodeURIComponent(JSON.stringify(item))
				})
			},
			goInvoiceLook() { //我的发票抬头
				uni.navigateTo({
					url: "./invoiceLook?type=1"
				})
			},
			downLoad(item) { //保存发票
				// uni.downloadFile({
				// 	url: item.invoice.invoice_image,
				// 	success: res => {
				// 		if (res.statusCode === 200) {
				// 			// this.isShowProgress = false;
				// 			console.log('下载成功');
				// 		}
				// 		let that = this;
				// 		uni.saveFile({
				// 			tempFilePath: res.tempFilePath,
				// 			success: function(red) {
				// 				// that.isShowProgress = false;
				// 				uni.showModal({
				// 					title: '提示',
				// 					content: '文件已保存：' + red.savedFilePath,
				// 					cancelText: '我知道了',
				// 					confirmText: '打开文件',
				// 					success: function(res) {
				// 						if (res.confirm) {
				// 							uni.openDocument({
				// 								filePath: red.savedFilePath,
				// 								success: (sus) => {
				// 									console.log('成功打开');
				// 								}
				// 							})
				// 						}
				// 					}
				// 				});
				// 			}
				// 		});
				// 	}
				// })
				httpRequest.saveHttpImg(item.invoice.invoice_image)
			},
			goInvoiceInfo(id) { //发票详情
				uni.navigateTo({
					url: "./invoiceInfo?id=" + id
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep.u-tabs__wrapper__nav__item {
		flex: 1;
	}

	.imgBox {
		width: 124rpx;
		height: 124rpx;
		border-radius: 14rpx 14rpx 14rpx 14rpx;
		overflow: hidden;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.price {
		font-size: 30rpx;
		font-family: DIN Next LT Pro-Bold, DIN Next LT Pro;
		font-weight: bold;
		color: #F3271C;
	}

	.applyButton {
		width: 170rpx;
		height: 67rpx;
		line-height: 67rpx;
		text-align: center;
		border-radius: 120rpx;
		border: 2rpx solid rgba(243, 39, 28, 1);
		font-size: 26rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #F3271C;
	}
</style>